<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>GoldenLayout- a multi-window javascript layout manager for webapps</title>
	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML5, JavaScript, Layout Manager, webapp" />
	<meta name="description" content="GoldenLayout- a multi-window javascript layout manager for webapps" />
	<meta name="author" content="Wolfram Hempel" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="../assets/css/screen.css" />
	
	<link rel="stylesheet" type="text/css" href="../assets/css/api.css" />
	<link rel="stylesheet" type="text/css" href="../assets/css/syntaxhighlighter.css" />
	
	<script type="text/javascript">
	document.createElement( 'header' );
	document.createElement( 'nav' );
	</script>
	<script type="text/javascript" src="../assets/js/jquery.js"></script>
</head>
<body class="category_tutorials">
	<div id="modal" class="loading">
		<div class="background"></div>
		<div class="content-wrapper">
			<div class="head">
				<div class="close"></div>
				<span class="title"></span>
			</div>
			<div class="content"></div>
		</div>
	</div>
	
	<div id="outerWrapper">
		

		
		<div id="nav" class="standalone">
			<div class="start-bg"></div>
			<ul>
				<li ><a href="..">Start</a></li>
				<li ><a href="../download">Download</a></li>
				<li ><a href="../examples">Demos</a></li>
				<li class="active"><a href="../tutorials">Tutorials</a></li>
				<li ><a href="../docs">Docs</a></li>
				<li ><a href="../faq">Faq</a></li>
			</ul>
			<iframe src="https://ghbtns.com/github-btn.html?user=deepstreamIO&repo=golden-layout&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

		</div>
		
		<div id="wrapper" class="main">
			<ul id="subnav">
	<li class="head first">GoldenLayout</li>
	<li >
		<a href="getting-started.html">Getting Started</a>
	</li>
	<li class="active">
		<a href="getting-started-react.html">Getting Started ReactJS</a>
	</li>
	<li >
		<a href="saving-state.html">Saving State</a>
	</li>
	<li >
		<a href="dynamically-adding-components.html">Adding Items</a>
	</li>
	<li >
		<a href="adding-controls-to-header.html">Header Controls</a>
	</li>
	<li >
		<a href="working-with-popouts.html">Popouts</a>
	</li>
	<li >
		<a href="extending-tabs.html">Extending Tabs</a>
	</li>

	<li class="head">Usage with...</li>
	<li >
		<a href="requirejs.html">RequireJS</a>
	</li>
	<li >
		<a href="angular-simple.html">Angular (simple)</a>
	</li>
	<li >
		<a href="angular-complex.html">Angular (complex)</a>
	</li>
	<li >
		<a href="highcharts.html">HighCharts</a>
	</li>
	<li >
		<a href="slickgrid.html">SlickGrid</a>
	</li>
</ul>
			<div id="content">
				<p><link href="../assets/css/getting-started.css" type="text/css" rel="stylesheet" />
Ok, let’s start with the basics:</p><h4>Building Blocks</h4><p>Layouts in GoldenLayout are created out of three building blocks: Rows, Columns and Stacks</p><ul class="building-blocks">
    <li>
        <img src="../assets/images/getting-started/row.png" width="154" height="94" alt="basic building block row"/>
        <p><em>Rows</em> arrange components horizontally along the x-axis</p>
    </li>
    <li>
        <img src="../assets/images/getting-started/column.png" width="154" height="94" alt="basic building block row"/>
        <p><em>Columns</em> arrange components vertically along the y-axis</p>
    </li>
    <li>
        <img src="../assets/images/getting-started/stack.png" width="154" height="94" alt="basic building block row"/>
        <p><em>Stacks</em> arrange components on top of each other along the z-axis as tabs</p>
    </li>
</ul>

<p>All three of these building blocks can be nested within each other infinitely.</p><p><img class="centered" src="../assets/images/getting-started/nested.png" width="326" height="150" /></p><h4>Config to Model</h4><p>Have you ever used HTML? Manipulated the DOM using JavaScript? Perfect – then you know how GoldenLayout works. GoldenLayouts are created out of JSON config (think HTML) that looks like this:</p><pre><code><span class="token keyword" >var</span> myLayout <span class="token operator" >=</span> <span class="token keyword" >new</span> <span class="token class-name" >GoldenLayout</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
    content<span class="token punctuation" >:</span> <span class="token punctuation" >[</span><span class="token punctuation" >{</span>
        type<span class="token punctuation" >:</span> <span class="token string" >'row'</span><span class="token punctuation" >,</span>
        content<span class="token punctuation" >:</span><span class="token punctuation" >[</span><span class="token punctuation" >{</span>
            type<span class="token punctuation" >:</span><span class="token string" >'react-component'</span><span class="token punctuation" >,</span>
            component<span class="token punctuation" >:</span> <span class="token string" >'test-component'</span><span class="token punctuation" >,</span>
            props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> label<span class="token punctuation" >:</span> <span class="token string" >'A'</span> <span class="token punctuation" >}</span>
        <span class="token punctuation" >}</span><span class="token punctuation" >,</span><span class="token punctuation" >{</span>
            type<span class="token punctuation" >:</span> <span class="token string" >'column'</span><span class="token punctuation" >,</span>
            content<span class="token punctuation" >:</span><span class="token punctuation" >[</span><span class="token punctuation" >{</span>
                type<span class="token punctuation" >:</span><span class="token string" >'react-component'</span><span class="token punctuation" >,</span>
                component<span class="token punctuation" >:</span> <span class="token string" >'test-component'</span><span class="token punctuation" >,</span>
                props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> label<span class="token punctuation" >:</span> <span class="token string" >'B'</span> <span class="token punctuation" >}</span>
            <span class="token punctuation" >}</span><span class="token punctuation" >,</span><span class="token punctuation" >{</span>
                type<span class="token punctuation" >:</span><span class="token string" >'react-component'</span><span class="token punctuation" >,</span>
                component<span class="token punctuation" >:</span> <span class="token string" >'test-component'</span><span class="token punctuation" >,</span>
                props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> label<span class="token punctuation" >:</span> <span class="token string" >'C'</span> <span class="token punctuation" >}</span>
            <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
        <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
    <span class="token punctuation" >}</span><span class="token punctuation" >]</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>The JSON config is processed and the layout engine builds up an object tree from it. This object tree remains interactive and can (if required) be manipulated using JavaScript (think DOM), e.g.</p><pre><code><span class="token comment" spellcheck="true">//Open the element with 'someId' in a new window
</span>myLayout<span class="token punctuation" >.</span>root<span class="token punctuation" >.</span><span class="token function" >getItemsById<span class="token punctuation" >(</span></span> <span class="token string" >'someId'</span> <span class="token punctuation" >)</span><span class="token punctuation" >[</span> <span class="token number" >0</span> <span class="token punctuation" >]</span><span class="token punctuation" >.</span><span class="token function" >popout<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">
//Add another component to the layout
</span>myLayout<span class="token punctuation" >.</span>root<span class="token punctuation" >.</span>contentItems<span class="token punctuation" >[</span> <span class="token number" >0</span> <span class="token punctuation" >]</span><span class="token punctuation" >.</span><span class="token function" >addChild<span class="token punctuation" >(</span></span><span class="token punctuation" >{</span>
    type<span class="token punctuation" >:</span><span class="token string" >'react-component'</span><span class="token punctuation" >,</span>
    component<span class="token punctuation" >:</span> <span class="token string" >'testComponent'</span><span class="token punctuation" >,</span>
    props<span class="token punctuation" >:</span> <span class="token punctuation" >{</span> label<span class="token punctuation" >:</span> <span class="token string" >'X'</span> <span class="token punctuation" >}</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><h4>Components</h4><p>GoldenLayout works with any react component. Just register them with <code>registerComponent()</code>:</p><pre><code><span class="token keyword" >var</span> TestComponent <span class="token operator" >=</span> React<span class="token punctuation" >.</span><span class="token function" >createClass<span class="token punctuation" >(</span></span><span class="token punctuation" >{</span>
    render<span class="token punctuation" >:</span> <span class="token keyword" >function</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
        <span class="token keyword" >return</span> <span class="token punctuation" >(</span><span class="token operator" >&lt;</span>h1<span class="token operator" >></span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>label<span class="token punctuation" >}</span><span class="token operator" >&lt;</span><span class="token operator" >/</span>h1<span class="token operator" >></span><span class="token punctuation" >)</span>
    <span class="token punctuation" >}</span>
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>

myLayout<span class="token punctuation" >.</span><span class="token function" >registerComponent<span class="token punctuation" >(</span></span> <span class="token string" >'testComponent'</span><span class="token punctuation" >,</span> TestComponent <span class="token punctuation" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true">
//Once all components are registered, call
</span>myLayout<span class="token punctuation" >.</span><span class="token function" >init<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>And that&#39;s all it takes to create a layout. Make sure to include jQuery, React and ReactDOM in a way that makes it accessible to GoldenLayout.</p><p><p data-height="268" data-theme-id="7376" data-slug-hash="yOveme" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/wolframhempel/pen/9cb7e16c6e3a5ad427297cc4d390b971/'>Gettins started with React</a> by Wolfram Hempel (<a href='http://codepen.io/wolframhempel'>@wolframhempel</a>) on <a href='http://codepen.io'>CodePen</a>.</p></p><script async src="//codepen.io/assets/embed/ei.js"></script>

<h4>Container &amp; EventHub</h4><p>Now that we&#39;ve got the basics covered, let&#39;s look at some more advanced features.</p><p><a href="../docs/Container.html">Containers</a> represent the panel your component lives in. They expose a lot of useful methods, e.g. <code>setTitle()</code> or <code>close()</code> and emit events like <code>resize</code>. The container a component lives in is exposed via a special property called <code>glContainer</code>. The container also allows you to access the layout-tree above your component. For example, to move the whole component into a new window, you&#39;d call:</p><pre><code><span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>glContainer<span class="token punctuation" >.</span>parent<span class="token punctuation" >.</span><span class="token function" >popout<span class="token punctuation" >(</span></span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>Communicating between components is always tricky, but with GoldenLayout it can be even harder if your components are distributed across multiple windows and screens. This is why GoldenLayout comes with an <a href="../docs/EventEmitter.html">EventHub</a> - an EventEmitter that&#39;s global to all windows and can be used for inter-component communication, even across windows. The eventHub is exposed through a property called <code>glEventHub</code>. To raise an event across all windows, you&#39;d call:</p><pre><code><span class="token keyword" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>glEventHub<span class="token punctuation" >.</span><span class="token function" >emit<span class="token punctuation" >(</span></span> <span class="token string" >'something-happend'</span><span class="token punctuation" >,</span> <span class="token punctuation" >{</span>some<span class="token punctuation" >:</span> <span class="token string" >'data'</span> <span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
</code></pre><p>Here&#39;s a ReactJS example making use of these features (give it a go, pop one or both components out and see how they&#39;re still able to interact):</p><p><p data-height="268" data-theme-id="7376" data-slug-hash="XdabGJ" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/wolframhempel/pen/XdabGJ/'>Complex usage with React</a> by Wolfram Hempel (<a href='http://codepen.io/wolframhempel'>@wolframhempel</a>) on <a href='http://codepen.io'>CodePen</a>.</p></p><script async src="//codepen.io/assets/embed/ei.js"></script>
				
				<h3>Comments and Questions</h3>
				<div id="disqusContainer">
					<div id="disqus_thread"></div>
				    <script type="text/javascript">
				        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				        var disqus_shortname = 'goldenlayoutcom'; // required: replace example with your forum shortname

				        /* * * DON'T EDIT BELOW THIS LINE * * */
				        (function() {
				            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
				            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
				            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				        })();
				    </script>
				    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
				    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
			    
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../assets/js/docs.js"></script>
		
		<div id="footerPush"></div>
	</div>
	<div id="footer">
		<div class="footer-content">
			<div class="copyright">&copy;<span class="year"></span> deepstreamHub GmbH</div>
			<script type="text/javascript">
			$('.year').html( (new Date()).getFullYear() );
			</script>
			<ul class="footerItems">
				<li>
					<a href="https://github.com/deepstreamIO/golden-layout">Github</a>
					<a href="https://www.npmjs.com/package/golden-layout">NPM</a>
					<div>bower/npm: <code>'golden-layout'</code></div>
				</li>
				<li>
					<div>deepstreamHub GmbH</div>
					<div>Lindenstrasse 20-25</div>
					<div>10969 Berlin</div>
				</li>
				<li>
					<a href="mailto:info@deepstreamhub.com">info@deepstreamhub.com</a>
					<a href="https://deepstreamhub.com/">deepstreamHub.com</a><br />
					<a href="https://twitter.com/wolframhempel">by @wolframhempel</a>

				</li>
			</ul>
		</div>
	</div>

	<script type="text/javascript" src="../assets/js/Modal.js"></script>
	
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-63583386-5', 'auto');
	  ga('send', 'pageview');

	</script>
	
</body>
</html>
